<template>
    <div id="box">
        <div id="search">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="菜单名称">
                    <el-input placeholder="请输入菜单名" v-model="authName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchAuth" icon="el-icon-search">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div id="header-bth">
            <el-button type="primary" size="small" icon=el-icon-circle-plus-outline @click="showAddAuthForm">新增
            </el-button>
        </div>
        <div id="auth-table">
            <el-table
                    ref="tableList"
                    :data="tableData"
                    height="400px"
                    style="width: 100%;"
                    row-key="id">
                <el-table-column
                        prop="title"
                        label="菜单名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="icon"
                        label="图标"
                        width="180">
                    <template slot-scope="scope">
                        <i :class="scope.row.icon"></i>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="permission"
                        label="权限标识">
                </el-table-column>

                <el-table-column
                        prop="model"
                        label="模块名称">
                </el-table-column>
                <el-table-column
                        prop="path"
                        label="组件路由">
                </el-table-column>
                <el-table-column
                        prop="component"
                        label="组件名称">
                </el-table-column>
                <el-table-column label="操作" width="180px">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="deleteConfirm(scope.$index, scope.row)">
                            <el-button slot="reference" size="mini" type="danger">删除</el-button>
                        </el-popconfirm>

                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--添加 编辑权限信息弹窗-->
        <el-dialog :title="title" :visible.sync="addAuthFormVisible" width="40%" @close="handleClear">
            <el-form :model="authForm" ref="authInfo" :rules="authRules" label-width="80px" size="medium"
                     label-position="left">
                <el-input v-model="authForm.id" autocomplete="off" v-show="false"></el-input>
                <el-form-item label="上级菜单" prop="pid">
                    <el-select v-model="authForm.pid" ref="select" placeholder="请选择" style="width: 100%">
                        <el-option key="id" hidden :value="id" :label="label"></el-option>
                        <el-tree ref="tree"
                                 style="padding: 0px 10px 10px 0px"
                                 :data="list"
                                 :expand-on-click-node="false"
                                 node-key="id"
                                 :default-expand-all="true"
                                 @node-click="handleCheck"
                        >
                        </el-tree>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型" prop="isMenu">
                    <el-radio-group v-model="authForm.isMenu">
                        <el-radio :label="0">目录</el-radio>
                        <el-radio :label="1">菜单</el-radio>
                        <el-radio :label="2">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="名称" prop="title">
                    <el-input v-model="authForm.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="目录图标" prop="icon">
                    <!--图标选择器-->
                    <e-icon-picker v-model="authForm.icon"/>
                </el-form-item>

                <el-form-item label="权限标识" prop="permission">
                    <el-input v-model="authForm.permission" autocomplete="off" placeholder="按钮权限标识"></el-input>
                </el-form-item>

                <el-form-item label="组件名称" prop="component">
                    <el-input v-model="authForm.component" autocomplete="off" placeholder="菜单组件名称"></el-input>
                </el-form-item>


                <el-form-item label="模块名称" prop="model">
                    <el-input v-model="authForm.model" autocomplete="off" placeholder="菜单路径"></el-input>
                </el-form-item>

                <el-form-item label="组件路径" prop="path">
                    <el-input v-model="authForm.path" autocomplete="off" placeholder="菜单路径"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addAuthInfo">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {addAuth, authList, deleteAuth, getAuth, getAuthById} from "@/api/auth";
import {listToTree} from "@/utils/treeUtil";

export default {
    name: "AuthorityView",
    data() {
        return {
            authName: '',
            title: '',
            tableData: [],
            authForm: {
                isMenu: 0,
                pid: '',
            },
            menuType: 0,
            label: '',
            id: '',
            list: [],
            addAuthFormVisible: false,
            authRules: {
                pid: [
                    {required: true, message: '请选择父菜单', trigger: 'blur'}
                ],
                isMenu: [
                    {required: true, message: '请填写类型', trigger: 'blur'}
                ],
                title: [
                    {required: true, message: '请填写名称', trigger: 'blur'}
                ]
            }
        }

    },
    methods: {
        //搜所权限
        searchAuth() {
            //  发送异步请求 查询权限信息
            let title = this.authName
            if (title) {

                return
            }
            this.toTree();
        },
        // 删除权限
        deleteConfirm(index, row) {
            let id = row.id
            deleteAuth(id).then(res=>{
                if (res.code==0){
                    this.$message.success(res.message)
                    this.toTree()
                    return
                }
                this.$message.warning(res.message)
            })
        },
        showAddAuthForm() {
            this.title = '添加菜单'
            this.addAuthFormVisible = true
            this.selectTree()
        },
        selectTree() {  // 渲染下拉选的树形结构
            // authList()
            authList().then(res => {
                let result = res.data.list.filter(auth => auth.isMenu != 2)  // [{id,label,pid},{}]
                    .map(auth => {
                        return {
                            id: auth.id,
                            label: auth.title,
                            pid: auth.pid
                        }
                    })

                let main = {
                    id: 0,
                    label: '主目录',
                    pid: -1,
                    children: listToTree(result)
                }
                this.list = [main]
            })

        },
        handleCheck(val) {
            // 点击节点获取 名称 赋值给label 显示在ei-options中
            this.label = val.label
            this.id = val.id


            this.authForm.pid = val.id
            // 选择完毕关闭 下拉选
            this.$refs.select.blur()
        },
        // 关闭弹窗  清除验证规则
        handleClear() {
            this.authForm = {
                isMenu: 0
            }
            this.$refs.authInfo.clearValidate()
            this.toTree()
        },
        // 编辑权限
        handleEdit(index, row) {
            this.title = "编辑菜单"
            this.addAuthFormVisible = true
            this.selectTree()
            // 根据id 查询权限信息 处理父菜单信息展示
            getAuthById(row.id).then(res => {
                if (res.code == 0) {
                    let permission = res.data.permission
                    let parentTitle = res.data.parentTitle


                    if (permission.pid != 0) {
                        this.label = parentTitle
                        this.id = permission.pid
                        this.authForm = permission
                        return
                    }

                    this.label = "主目录";
                    this.id = permission.pid;
                    this.authForm = permission
                }
            })
        },
        addAuthInfo() {
            this.$refs.authInfo.validate(valid => {
                if (!valid) {
                    this.$message.warning("请填写完整的信息")
                    return
                }
                // 发送异步请求 添加菜单信息  this.authForm
                addAuth(this.authForm).then(res => {
                    if (res.code == 0) {
                        this.$message.success(res.message)
                        this.addAuthFormVisible = false
                        this.toTree()
                        return
                    }
                    this.$message.warning(res.message)
                })
            })
        },

        toTree() {
            authList().then(res => {
                if (res.code == 0) {
                    this.tableData = listToTree(res.data.list)
                }
            })
        }
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    created() {
        this.toTree()
    }
}
</script>

<style scoped>
#box {
    width: 95%;
    margin: 5px auto 0;
}

#search {
    width: 100%;
    height: 50px;
    padding-bottom: 20px;
    margin-top: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}

#header-bth {
    margin-bottom: 15px;
}

</style>